<template>
    <div class="left">
        <el-button size="small" @click="changeButton">
            <el-icon :size="20">
                <Menu></Menu>
            </el-icon>
        </el-button>
    </div>
    <div class="right">
        <el-dropdown>
            <span class="el-dropdown-link">
                <img class="user" src="../assets/cool.jpg" alt="">
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item>个人中心</el-dropdown-item>
                    <el-dropdown-item @click="emit">退出</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useMainStore } from '../store/index.js'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const mainStore = useMainStore()

const changeButton = () => {
    mainStore.changeIsCollpase()
}

const emit = () => {
    router.push('/login')
    mainStore.cleanMenu()
    mainStore.clearToken()
    mainStore.clearPermission()
}


const count = ref(0)
</script>

<style scoped>
.user {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
</style>
